<template>
<center>
  <div>
    <h2>购物车</h2>
    <ul>
      <li v-for="item in cartItems" :key="item.id">
        {{ item.name }} - ¥ {{ item.price }} - 数量： {{ item.quantity }}
        <button @click="decrementQuantity(item.id)">-</button>
        <button @click="incrementQuantity(item.id)">+</button>
        <!-- <button @click="removeFromCart(item.id)">Remove</button> -->
      </li>
    </ul>
    <p>总计: {{ totalAmount }}</p>
  </div>
  </center>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapGetters(['cartItems', 'totalAmount'])
  },
  methods: {
    ...mapActions(['addToCart', 'removeFromCart', 'incrementQuantity', 'decrementQuantity'])
  },
  mounted() {
    // 假设这是从服务器获取的商品数据
    this.addToCart({ id: 1, name: '手机', price: 1000, quantity: 1 });
    this.addToCart({ id: 2, name: '电脑', price: 2000, quantity: 1 });
    this.addToCart({ id: 3, name: '键盘', price: 200, quantity: 2 });
  }
};
</script>
<style>
  ul{
    list-style:none;
  }
</style>